<template>
  <div>
    <div class="select_top">
      <el-input v-model="queryparam" @keyup.native.enter="getzbtList" placeholder="请输入分类名称、编号搜索" style="width:29%;margin-right:10px"></el-input>
      <el-button @click="getzbtList">搜索</el-button>
      <el-button type="primary" style="float:right" @click="showNewzb">新增</el-button>
    </div>
    <el-table
      ref="filterTable"
      :data="zbtList"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >

      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.nname"
        label="指标名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.nclassifyname"
        label="所属分类"
      >
      </el-table-column>
      <el-table-column
        prop="hash.nvalue"
        label="分值"
      >
      </el-table-column>
      <el-table-column
        prop="hash.orgname"
        label="填报单位"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="changeZB(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="deleteZB(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增绩效指标"
      :visible.sync="showT"
    >
      <!-- <el-form labelWidth="140px">
        <el-form-item label="指标属性">
          <el-select v-model="propertyid" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="指标属性"
          >
            <el-option
              v-for="item in sxSelect"
              :key="item.hash.pname"
              :label="item.hash.pname"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('指标属性') }}</div>
        </el-form-item>
        <el-form-item label="指标名称">
          <el-input v-model="nname" v-validate="'required'" name="指标名称"></el-input>
          <div class="el-form-item__error">{{ errors.first('指标名称') }}</div>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="nclassify" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="所属分类"
          >
            <el-option
              v-for="item in flList"
              :key="item.hash.code_id"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('所属分类') }}</div>
        </el-form-item>
        <el-form-item label="指标类型">
          <el-radio-group v-model="ntype">
            <el-radio label="1">加分项</el-radio>
            <el-radio label="2">扣分项</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分值">
          <el-input v-model="nvalue" placeholder="上限99999" v-validate="'required'" name="分值"></el-input>
          <div class="el-form-item__error">{{ errors.first('分值') }}</div>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="ordernumber" type="number" placeholder="请输入" v-validate="'required'"
            min="0"
            name="排序"
          ></el-input>
          <div class="el-form-item__error">{{ errors.first('排序') }}</div>
        </el-form-item>
        <el-form-item label="考核单位">
          <el-select v-model="assessorgid" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="考核单位"
          >
            <el-option
              v-for="item in dwList1"
              :key="item.hash.orgname"
              :label="item.hash.orgname"
              :value="item.hash.orgid"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('考核单位') }}</div>
        </el-form-item>
        <el-form-item label="考核对象">
          <el-input v-model="khdx" placeholder="请选择" style="width:84%" readonly></el-input><el-button type="primary" style="margin-left:1%" @click="innerVisible=true">选择</el-button>
        </el-form-item>
        <el-form-item label="协调部门">
          <el-input v-model="xtbm" placeholder="请选择" style="width:84%" readonly></el-input><el-button type="primary" style="margin-left:1%" @click="showxt=true">选择</el-button>
        </el-form-item>
        <el-form-item label="评分细则">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="ntext"
            v-validate="'required'" name="评分细则"
          >
          </el-input>
          <div class="el-form-item__error">{{ errors.first('评分细则') }}</div>
        </el-form-item>
      </el-form> -->
      <newZb ref="child2" @changeshowt="changeshowt"></newZb>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showT = false">取 消</el-button>
        <el-button type="primary" @click="newZB">确 定</el-button>
      </span>
      <!-- <el-dialog
        width="50%"
        title="选择考核对象"
        :visible.sync="innerVisible"
        appendToBody
      >
        <el-table
          ref="multipleTable"
          :data="dwList2"
          tooltipEffect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="hash.orgid"
            label="对象 ID"
          >
          </el-table-column>
          <el-table-column
            prop="hash.orgname"
            label="对象名称"
          >
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="toggleSelection()">取消选择</el-button>
          <el-button @click="innerVisible=false">提交</el-button>
        </span>
      </el-dialog>
      <el-dialog
        width="50%"
        title="选择协同部门"
        :visible.sync="showxt"
        appendToBody
      >
        <el-table
          ref="xtbm"
          :data="dwList3"
          tooltipEffect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange2"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="hash.orgid"
            label="对象 ID"
          >
          </el-table-column>
          <el-table-column
            prop="hash.orgname"
            label="对象名称"
          >
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="toggleSelection2()">取消选择</el-button>
          <el-button @click="showxt=false">提交</el-button>
        </span>
      </el-dialog> -->
    </el-dialog>

    <el-dialog
      title="修改绩效指标"
      :visible.sync="showT2"
    >
      <el-form labelWidth="140px" v-loading="loading">
        <el-form-item label="指标属性" class="is-required">
          <el-select v-model="zbData.propertyid" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="指标属性"
          >
            <el-option
              v-for="item in sxSelect"
              :key="item.hash.pname"
              :label="item.hash.pname"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('指标属性') }}</div>
        </el-form-item>
        <el-form-item label="指标名称" class="is-required">
          <el-input v-model="zbData.nname" v-validate="'required'" name="指标名称"></el-input>
          <div class="el-form-item__error">{{ errors.first('指标名称') }}</div>
        </el-form-item>
        <el-form-item label="所属分类" class="is-required">
          <el-select v-model="zbData.nclassify" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="所属分类"
          >
            <el-option
              v-for="item in flList"
              :key="item.hash.code_name"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('所属分类') }}</div>
        </el-form-item>
        <el-form-item label="指标类型" class="is-required">
          <el-radio-group v-model="zbData.ntype">
            <el-radio label="1">加分项</el-radio>
            <el-radio label="2">扣分项</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="办事处分值" class="is-required">
          <el-input v-model="zbData.nvalue" placeholder="上限99999"></el-input>
          <!-- <div class="el-form-item__error">{{ errors.first('办事处分值') }}</div> -->
        </el-form-item>
        <el-form-item label="区镇分值" class="is-required">
          <el-input v-model="zbData.nvalue1" placeholder="上限99999"></el-input>
          <!-- <div class="el-form-item__error">{{ errors.first('区镇分值') }}</div> -->
        </el-form-item>
        <el-form-item label="排序" class="is-required">
          <el-input v-model="zbData.ordernumber" type="number" placeholder="请输入" v-validate="'required'"
            min="0"
            name="排序"
          ></el-input>
          <div class="el-form-item__error">{{ errors.first('排序') }}</div>
        </el-form-item>
        <el-form-item label="考核单位" class="is-required">
          <el-select v-model="zbkhData.orgid" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="考核单位"
          >
            <el-option
              v-for="item in dwList1"
              :key="item.hash.orgname"
              :label="item.hash.orgname"
              :value="item.hash.orgid"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('考核单位') }}</div>
        </el-form-item>
        <el-form-item label="考核对象">
          <el-input v-model="khdx" placeholder="请选择" style="width:84%" readonly></el-input><el-button type="primary" style="margin-left:1%" @click="choose1()">选择</el-button>
        </el-form-item>
        <el-form-item label="协同部门">
          <el-input v-model="xtbm" placeholder="请选择" style="width:84%" readonly></el-input><el-button type="primary" style="margin-left:1%" @click="choose2()">选择</el-button>
        </el-form-item>
        <el-form-item label="办事处评分细则">
          <el-input name="办事处评分细则"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="zbData.ntext"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="区镇评分细则">
          <el-input name="区镇评分细则"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="zbData.ntext1"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showT2 = false">取 消</el-button>
        <el-button type="primary" @click="saveChangeZB">修 改</el-button>
      </span>
      <el-dialog
        width="50%"
        title="选择考核对象"
        :visible.sync="innerVisible"
        appendToBody
      >
        <el-table
          ref="multipleTable"
          :data="dwList2"
          tooltipEffect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="hash.orgid"
            label="对象 ID"
          >
          </el-table-column> -->
          <el-table-column
            prop="hash.orgname"
            label="对象名称"
          >
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible=false">取消选择</el-button>
          <el-button @click="orgsave()">提交</el-button>
        </span>
      </el-dialog>
      <el-dialog
        width="50%"
        title="选择协同部门"
        :visible.sync="showxt"
        appendToBody
      >
        <el-table
          ref="xtbm"
          :data="dwList3"
          tooltipEffect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange2"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="hash.orgid"
            label="对象 ID"
          >
          </el-table-column> -->
          <el-table-column
            prop="hash.orgname"
            label="对象名称"
          >
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="toggleSelection2()">取消选择</el-button> -->
          <el-button @click="showxt=false">取消选择</el-button>
          <el-button @click="teamsave()">提交</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import { ValidationProvider } from 'vee-validate';
import newZb from '~/components/common/newZb.vue';

export default {
  data() {
    return {
      ts: this.newStore(),
      queryparam: '',
      loading: true,
      innerVisible: false,
      showT: false,
      showT2: false,
      showxt: false,
      zhibiaoNum: '',
      zbType: '',
      description: '',
      ordernumber: '',
      zbtList: [],
      zbData: {},
      zbkhData: [],
      zbzrData: [],
      khdx: [],
      xtbm: [],
      sxSelect: [],
      flList: [],
      dwList1: [],
      dwList2: [],
      dwList3: [],
      ntype: '',
      nname: '',
      ntext: '',
      ntext1: '',
      nvalue: '',
      nvalue1: '',
      assessorgid: '',
      propertyid: '',
      nclassify: '',
      orgid: [],
      selectedorgid: [],
      teamorgid: [],
      selectedteamorgid: [],
    };
  },
  components: {
    ValidationProvider,
    newZb,
  },
  created() {
    this.getzbtList();
  },
  methods: {
    choose1() {
      this.innerVisible = true;
      // 将值赋给新数组
      const a = [];
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
        this.selectedorgid = this.orgid.slice();

        for (let i = 0; i < this.dwList2.length; i += 1) {
          for (let j = 0; j < this.selectedorgid.length; j += 1) {
            if (this.dwList2[i].hash.orgid == this.selectedorgid[j]) {
              a.push(this.dwList2[i]);
            }
          }
        }


        for (let i = 0; i < a.length; i += 1) {
          this.$refs.multipleTable.toggleRowSelection(a[i]);
        }
      });
    },
    orgsave() {
      this.orgid = this.selectedorgid.slice();
      this.khdx = [];
      for (let i = 0; i < this.dwList2.length; i += 1) {
        for (let j = 0; j < this.orgid.length; j += 1) {
          if (this.dwList2[i].hash.orgid == this.orgid[j]) {
            this.khdx.push(this.dwList2[i].hash.orgname);
          }
        }
      }
      this.innerVisible = false;
    },
    choose2() {
      this.showxt = true;
      // 将值赋给新数组
      const a = [];
      this.$nextTick(() => {
        this.$refs.xtbm.clearSelection();
        this.selectedteamorgid = this.teamorgid.slice();

        for (let i = 0; i < this.dwList3.length; i += 1) {
          for (let j = 0; j < this.selectedteamorgid.length; j += 1) {
            if (this.dwList3[i].hash.orgid == this.selectedteamorgid[j]) {
              a.push(this.dwList3[i]);

              // console.log(a);
            }
          }
        }


        for (let i = 0; i < a.length; i += 1) {
          this.$refs.xtbm.toggleRowSelection(a[i]);
        }
      });
    },
    teamsave() {
      this.teamorgid = this.selectedteamorgid.slice();
      this.xtbm = [];
      for (let i = 0; i < this.dwList3.length; i += 1) {
        for (let j = 0; j < this.teamorgid.length; j += 1) {
          if (this.dwList3[i].hash.orgid == this.teamorgid[j]) {
            this.xtbm.push(this.dwList3[i].hash.orgname);
          }
        }
      }
      this.showxt = false;
    },
    changeshowt() {
      this.showT = false;
      this.getzbtList();
    },
    showNewzb() {
      this.showT = true;
    },
    newZB() {
      this.$refs.child2.newZB();
    },
    changeZB(item) {
      this.orgid = [];
      this.teamorgid = [];
      this.khdx = [];
      this.xtbm = [];
      this.loading = true;
      this.getdwList();
      this.getsxSelect();
      this.getflList();
      const req = {
        handle: 'B37BA078041E48C700BF5F304574952ADABEBF389D1E7FEB',
        nid: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.zbData = ts.d.data.operation1[0].hash;
        this.zbkhData = ts.d.data.operation2[0].hash;
        for (let i = 0; i < ts.d.data.operation3.length; i += 1) {
          this.khdx.push(ts.d.data.operation3[i].hash.orgname);
          this.orgid.push(ts.d.data.operation3[i].hash.orgid);
        }
        for (let i = 0; i < ts.d.data.operation4.length; i += 1) {
          this.xtbm.push(ts.d.data.operation4[i].hash.orgname);
          this.teamorgid.push(ts.d.data.operation4[i].hash.orgid);
        }

        setTimeout(() => {
          this.loading = false;
        }, 100);
      });
      this.showT2 = true;
    },
    saveChangeZB() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: 'B37BA078041E48C700BF5F304574952AFC1DB8EFDC8D3155',
            nname: this.zbData.nname,
            propertyid: this.zbData.propertyid,
            nclassify: this.zbData.nclassify,
            ntype: this.zbData.ntype,
            nvalue: this.zbData.nvalue,
            nvalue1: this.zbData.nvalue1,
            ntext: this.zbData.ntext,
            ntext1: this.zbData.ntext1,
            ordernumber: this.zbData.ordernumber,
            assessorgid: [this.zbkhData.orgid],
            orgid: this.orgid,
            teamorgid: this.teamorgid,
            id: this.zbData.id,
          };
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.showT2 = false;
              this.getzbtList();
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    getzbtList() {
      const req = {
        handle: 'B37BA078041E48C700BF5F304574952AABE29D02A6FDC4E5',
        queryparam: this.queryparam,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.zbtList = ts.d.data.operation1;
      });
    },
    getflList() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B7D59D38996D29503FD58B6E268D37EF8',
        supid: '01',
        codetype: '01',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.flList = ts.d.data.operation1;
      });
    },
    handleSelectionChange(val) {
      // this.khdx = [];
      this.selectedorgid = [];
      for (let i = 0; i < val.length; i += 1) {
        // this.khdx.push(val[i].hash.orgname);
        this.selectedorgid.push(val[i].hash.orgid);
      }
    },
    handleSelectionChange2(val) {
      // this.xtbm = [];
      this.selectedteamorgid = [];
      for (let i = 0; i < val.length; i += 1) {
        // this.xtbm.push(val[i].hash.orgname);
        this.selectedteamorgid.push(val[i].hash.orgid);
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    toggleSelection2(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.xtbm.toggleRowSelection(row);
        });
      } else {
        this.$refs.xtbm.clearSelection();
      }
    },
    getsxSelect() {
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BE133DA25EC7F9F14C878125FE067FE5A',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sxSelect = ts.d.data.operation1;
      });
    },
    getdwList() {
      const req2 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '2',
      };
      const req3 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '4',
      };
      const req1 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '1',
      };
      this.spost(this.ts, '/mainservlet', req2).then((ts) => {
        this.dwList2 = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.dwList1 = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req3).then((ts) => {
        this.dwList3 = ts.d.data.operation1;
      });
    },
    deleteZB(item) {
      const req = {
        handle: 'B37BA078041E48C700BF5F304574952A73F4B64ADD1D1CA7',
        nid: item.hash.id,
      };
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          if (ts.d.data.operation1[0].hash.msg == 'success') {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.getzbtList();
          } else {
            this.$message({
              type: 'error',
              message: ts.d.data.operation1[0].hash.msg,
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
  },
};
</script>

<style lang="stylus">
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
  margin-right: 4px
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.el-table th>.cell
  text-align center
.el-table .cell
  text-align center
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
